<template>
	<view class="container">
		<view class="talent-list">
			<view v-for="(item, index) in lists" :key="item.talentMobile">
				<view class="content-box uni-flex" @tap="goPage('/pages/talents/detail',{talentMobile:item.talentMobile})">
					<view class="uni-flex content-box-left">
						<img-item class="content-image" :src="item.photo"></img-item>
					</view>
					<view class="uni-flex uni-column content-box-right">
						<view class="content-name">
							<text>
								{{item.name}}
							</text>
						</view>
						<item-score :score="item.score"></item-score>
						<view class="content-tag">
							<view class="tag-item" v-for="(skillItem, skillIndex) in item.skillList" :key="skillIndex">
								{{skillItem}}
							</view>
						</view>
						<view class="content-text">
							<rich-text :nodes="item.introduction"></rich-text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="loading-more" v-if="isLoading">
			<text class="loading-more-text">加载中</text>
		</view>
	</view>
</template>

<script>
	import itemScore from "@/components/base/item-score.vue";
	import * as api from '@/http/api.js'
	export default {
		components: {
			itemScore
		},
		data() {
			return {
				lists: [],
				pageSize: 10, // 每页条数
				currentPage: 1, // 当前页码
				isLoading: false // 是否继续加载
			}
		},
		onShow() {
			// 加载第一页
			this.lists = [];
			this.currentPage = 1;
			this.getList(1);
		},
		onReachBottom() {
			if (this.isLoading) {
				this.currentPage++;
				this.getList(this.currentPage)
			}
		},
		methods: {
			// 获取当前页数据
			getList(page) {
				this.isLoading = true
				let param = {
					current: page,
					size: this.pageSize
				}

				this.$request({
					url: api.getTalentList,
					data: param
				}).then((res) => {
					// 请求得到的数据添加在对应list数据之后
					this.lists = [...this.lists, ...res.records]
					if (res.records.length < this.pageSize) {
						this.isLoading = false;
					}
				}).catch(err => {
					console.log(err)
					this.isLoading = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F6F6F6;
	}

	.talent-list {
		.content-box {
			margin: 20rpx 28rpx;
			background-color: #fff;
			padding: 24rpx 20rpx;
			border-radius: 16rpx;

			.content-box-left {
				-webkit-justify-content: center;
				justify-content: center;
				-webkit-align-items: center;
				align-items: center;

				.content-image {
					width: 200rpx;
					height: 264rpx;
				}
			}

			.content-box-right {
				-webkit-flex: 1;
				flex: 1;
				-webkit-justify-content: space-between;
				justify-content: space-between;
				padding-left: 20rpx;
				color: #333333;

				.content-name {
					font-size: 36rpx;
				}

				.content-text {
					height: 108rpx;
					color: rgba(0, 0, 0, 0.5);
					line-height: 36rpx;
					font-size: 24rpx;
					text-align: left;
					overflow: hidden;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
				}

				.content-tag {
					.tag-item {
						display: inline-block;
						font-size: 24rpx;
						line-height: 36rpx;
						padding: 0 10rpx;
						background-color: #F4F2F3;
						color: #FF6C25;
						border-radius: 2rpx;
						margin-right: 20rpx;
					}
				}
			}
		}
	}

	.loading-more {
		align-items: center;
		justify-content: center;
		padding: 10px 0;
		text-align: center;
	}

	.loading-more-text {
		font-size: 28rpx;
		color: #999;
	}
</style>
